<template>
	<view class="settle-container">
		<!-- (取消)全选 -->
		<view class="checked-all">
			<label class="radio" @click="changeAllState">
				<radio :checked="isAllCheck" color="#c00000"></radio>
				<text>全选</text>
			</label>
		</view>
		<!-- 合计 -->
		<view class="amount-box">
			合计:<text class="amount">￥{{checkedGoodsAmount}}</text>
		</view>
		<!-- 结算按钮 -->
		<view class="settle-btn" @click="settlement">结算({{checkedCount}})</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
	} from "vuex";
	export default {
		name: "my_settle",
		computed: {
			// 获取vuex数据
			...mapGetters("m_cart", ["checkedCount", "total", "checkedGoodsAmount"]), //结算选中
			...mapGetters("m_user", ["addressTotal"]), //用户地址
			...mapState("m_user", ["token"]), //用户登录
			...mapState("m_cart", ["cart"]), //用户登录
			// 是否全选
			isAllCheck() {
				return this.total === this.checkedCount;
			}
		},
		data() {
			return {

			};
		},
		methods: {
			// #ifndef 全选/反选
			changeAllState() {
				// 调用vuex方法 修改所有商品的勾选状态
				this.$store.commit("m_cart/updateAllGoodsState", !this.isAllCheck);
			},
			// #endif
		}
	}
</script>

<style scoped lang="scss">
	.settle-container {
		// position: sticky; //有时不适合置于底部时使用
		position: fixed;
		bottom: 40px;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		z-index: 99;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 10rpx;
		font-size: 28rpx;
	}

	.radio {
		display: flex;
		align-items: center;
	}

	.amount {
		color: #C00000;
	}

	.settle-btn {
		min-width: 200rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #c00000;
		color: #ffffff;
	}
</style>
